<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../../styles/common.css" />
    <link rel="stylesheet" href="../../styles/page.css" />
</head>
<body>
<div class="addBrand-container" id="member-add-app">
    <div class="container">
        <el-form
                ref="ruleForm"
                :model="ruleForm"
                :inline="false"
                label-width="180px"
                class="demo-ruleForm"
        >
            <el-form-item>
                <p>第一次登录，用户初始密码为:123456</p>
            </el-form-item>
            <el-form-item
                    label="原密码:"
                    prop="verPassword"
            >
                <el-input
                        v-model="ruleForm.verPassword"
                        placeholder="请输入原密码"
                        maxlength="20"></el-input>
                <el-button
                        type="primary"
                        @click="submitForm()"
                >
                    验证
                </el-button>
            </el-form-item>
            <el-form-item v-if="showNewPassword"
            label="新密码:"
            prop="password"
            >
                <el-input
                        v-model="ruleForm.password"
                        placeholder="请输入新密码"
                        maxlength="20"
                ></el-input>
            </el-form-item>

            <div class="subBox address">
                <el-form-item v-if="showNewPassword">
                    <el-button type="primary" class="continue" @click="go()">修改</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/user.js"></script>
<script src="../../js/validate.js"></script>
<script src="../../js/index.js"></script>
<script>
    new Vue({
        el: '#member-add-app',
        data() {
            return {
                id: '',
                actionType : '',
                ruleForm : {
                    password:'',
                    verPassword:''
                },
                showNewPassword: false,
            }
        },
        computed: {
            rules () {
                return {
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                }
            }
        },
        created() {
            this.id = requestUrlParam('id')
            this.actionType = this.id ? 'edit' : 'add'
            if (this.id) {
                this.init()
            }
        },
        mounted() {
        },
        methods: {
            async init () {
                queryEmployeeById(this.id).then(res => {
                    console.log(res)
                    if (String(res.code) === '1') {
                        console.log(res.data)
                        this.ruleForm = res.data
                        this.imageUrl = `/common/download?name=${res.data.idpicpath}`
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                })
            },
            submitForm () {
                if (this.ruleForm.password === this.ruleForm.verPassword) {
                    this.$message.success('验证成功')
                    this.showNewPassword = true
                } else {
                    this.$message.error('验证失败')
                    this.showNewPassword = false
                }
            },
            goBack2(st) {
                window.parent.menuHandle({
                    id: '2',
                    url: '/backend/page/info/info.html?id='+st,
                    name: '个人信息'
                },true)
            },
            go() {
                const params = {
                    ...this.ruleForm,
                }
                editUser(params).then(res => {
                    console.log(this.birthday)
                    if (res.code === 1) {
                        this.$message.success('密码修改成功！')
                        setTimeout(() => {
                            window.sessionStorage.clear()
                            window.top.location.href = '/backend/page/login/login.html'
                        }, 2000)

                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },
            handleAvatarSuccess (response, file, fileList) {
                // 拼接down接口预览
                if(response.code === 0 && response.msg === '未登录'){
                    window.top.location.href = '/backend/page/login/login.html'
                }else{
                    this.imageUrl = `/common/download?name=${response.data}`
                    this.ruleForm.idpicpath = response.data
                }
            },


        }
    })
</script>
</body>
</html>